<template>
    <el-container direction="horizontal">
      <!-- 侧边栏 -->
      <el-aside width="250px" class="sidebar">
        <el-menu default-active="1" class="el-menu-vertical">
          <el-menu-item index="1">
            <el-icon><ChatDotRound /></el-icon>
            <span>ChatGPT</span>
          </el-menu-item>
          <el-menu-item index="2">
            <el-icon><Search /></el-icon>
            <span>探索 GPT</span>
          </el-menu-item>
          <el-sub-menu index="3">
            <template #title>前30天</template>
            <el-menu-item index="3-1">Vue Chat界面设计</el-menu-item>
            <el-menu-item index="3-2">WebSocket与HTTPS连接</el-menu-item>
            <el-menu-item index="3-3">逆向工程技术栈概览</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="4">
            <template #title>一月</template>
            <el-menu-item index="4-1">DMA 组件与响应区别</el-menu-item>
            <el-menu-item index="4-2">CE分析JFrame数值修改</el-menu-item>
          </el-sub-menu>
        </el-menu>

      </el-aside>
    
        <!-- 主内容区域 -->
    <el-main class="main-content">
        <h2>ChatGPT</h2>
      </el-main>
      
      
      <!-- 优化后的聊天输入框，使用 Input 的 append 插槽 -->  
      <el-footer class="footer">
        <el-input v-model="userInput" placeholder="问问任何问题" clearable>
          <template #append>
            <el-button type="primary" @click="sendMessage">发送</el-button>
          </template>
        </el-input>
      </el-footer>
    </el-container>
  </template>
  
<script setup>
  import { ref } from 'vue';
  import { ChatDotRound, Search } from '@element-plus/icons-vue';
  
  const userInput = ref('');
  
  const sendMessage = () => {
    console.log('用户输入:', userInput.value);
    // 此处可添加发送消息的逻辑
    userInput.value = '';
  };
</script>
  
  <style scoped>
  .sidebar {
    height: 100vh;
    background: #f8f8f8;
  }
  
  .main-content {
    padding: 20px;
    margin-bottom: 100px; /* 给底部输入框预留足够空间 */
  }
  
  .footer {
    position: fixed;
    bottom: 20px;
    left: 280px;
    right: 20px;
    padding: 10px 20px;
    background-color: #fff;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
    z-index: 100;
  }
  </style>
  